<template>
    <el-form ref="loginFormRef" :model="form" :rules="rules" label-width="0" size="large" @keyup.enter="login">
        <el-form-item prop="user">
            <el-input v-model="form.user" prefix-icon="el-icon-user" clearable
                :placeholder="$t('login.userPlaceholder')"></el-input>
        </el-form-item>
        <el-form-item prop="password">
            <el-input v-model="form.password" prefix-icon="el-icon-lock" clearable show-password
                :placeholder="$t('login.PWPlaceholder')"></el-input>
        </el-form-item>
        <el-form-item style="margin-bottom: 10px;">
            <el-col :span="12">
                <el-checkbox :label="$t('login.rememberMe')" v-model="form.autologin"></el-checkbox>
            </el-col>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" style="width: 100%;" :loading="islogin" round @click="login">{{ $t('login.signIn')
            }}</el-button>
        </el-form-item>
    </el-form>
</template>
<script setup>
import { ref, computed, reactive, inject } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import i18n from '@/locales';
import { useRouter } from 'vue-router';

const $API = inject('$API');
const $TOOL = inject('$TOOL');
const router = useRouter();
const form = reactive({
    user: "",
    password: "",
    autologin: false
});
const rules = computed(() => ({
    user: [{ required: true, message: i18n.global.t('login.userError'), trigger: 'blur' }],
    password: [{ required: true, message: i18n.global.t('login.PWError'), trigger: 'blur' }],
}));
const islogin = ref(false);
const loginFormRef = ref(null);
const login = () => {
    loginFormRef.value.validate(async (valid) => {
        if (!valid) {
            return false
        };
        const data = {
            username: form.user,
            password: form.password,
            expires: form.autologin ? 24 * 60 * 60 : 60 * 60
        };
        islogin.value = true;
        const user = await $API.auth.token.post(data);
        if (user.code == 200) {
            $TOOL.cookie.set("token", user.data.token, { expires: form.autologin ? 24 * 60 * 60 : 60 * 60 });
            $TOOL.data.set("USER_INFO", user.data.user_info);
        } else {
            islogin.value = false;
            ElMessage.warning(user.message);
            return false;
        }
        // 获取菜单
        const menu = await $API.auth.menus.get();
        if(menu.code == 200) {
            if(menu.data.menu.length==0) {
                islogin.value = false;
                ElMessageBox.alert("当前用户无任何菜单权限，请联系系统管理员", "无权限访问", {
                    type: 'error',
                    center: true
                });
                return false;
            }
            $TOOL.data.set("MENU", menu.data.menu);
            $TOOL.data.set("PERMISSIONS", menu.data.permissions);
            $TOOL.data.set("DASHBOARDGRID", menu.data.dashboardGrid);
        } else {
            islogin.value = false;
            ElMessage.warning(menu.message);
            return false;
        }
        // 跳转到首页
        router.replace({ path: '/' });
        ElMessage.success(user.message);
        islogin.value = false;
    })
}
</script>